// 分类页面
<template>
  <div class="categories-container">
    <div class="filter-container">
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">
        新增分类
      </el-button>
    </div>
    <!-- id, name,count-->
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="_id" label="ID" width="80" align="center" />
      <el-table-column prop="name" label="分类名称" min-width="200" />
      <el-table-column
        prop="count"
        label="文章数量"
        width="120"
        align="center"
      />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button> -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="categoryForm.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "CategoriesManagement",
  data() {
    return {
      // id, name,count
      list: [],
      SearchForPreviousCategories: [],
      dialogVisible: false,
      dialogTitle: "",
      categoryForm: {
        id: null,
        name: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取分类处理
    getList() {
      // 获取笔记列表数据
      axios.get("http://127.0.0.1:3000/api/Categorie").then(
        (response) => {
          // 将api数据赋值给data
          // console.log(response.data.data);
          const data = response.data.data;
          // console.log(data);

          // 最终将data数据赋值给list
          this.list = data;
          this.SearchForPreviousCategories = data;
        },
        () => {
          this.$message.error("获取分类失败~~");
        }
      );
    },
    // 新增分类处理
    handleCreate() {
      this.dialogTitle = "新增分类";
      this.categoryForm = {
        id: null,
        name: "",
      };
      this.dialogVisible = true;
    },
    // 编辑分类处理
    // handleEdit(article) {
    //   // console.log(article);
    //   (this.categoryForm.id = article._id),
    //     (this.categoryForm.name = article.name);
    //   this.dialogTitle = "编辑分类";
    //   const id = this.categoryForm.id;
    //   const name = this.categoryForm.name;
    //   axios
    //     .patch(`http://127.0.0.1:3000/api/Categorie/${id}`, {
    //       id,
    //       name,
    //     })
    //     .then(() => {})
    //     .catch(() => {});
    //   this.dialogVisible = true;
    // },
    // 删除分类处理
    handleDelete(article) {
      this.$confirm("确认删除该分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .delete(`http://127.0.0.1:3000/api/Categorie/${article._id}`)
          .then(() => {
            this.$message.success("删除成功");
            this.getList();
          });
        // console.log(article);
      });
    },
    // 编辑分类模态框
    handleSubmit() {
      const id = this.categoryForm.id;
      const name = this.categoryForm.name;
      axios
        .post("http://127.0.0.1:3000/api/AddCategorie", {
          id,
          name,
        }) // 传递表单内容
        .then(() => {
          this.$message.success("笔记创建成功");
          this.getList();
        })
        .catch(() => {
          this.$message.error("笔记创建失败");
        });

      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.categories-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.filter-container {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.el-button--primary {
  background: linear-gradient(to right, #409eff, #64b5f6);
  border: none;
  transition: all 0.3s;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.el-dialog {
  border-radius: 8px;
}

.el-form-item__label {
  color: #606266;
}
</style>
